<!--
 * hi-navigation-bar - 导航栏
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-navigation-bar" :class="_classes" :style="_styles">
        <!-- 左侧区域 -->
        <view class="hi-navigation-bar__left">
            <!-- 返回区域 -->
            <view class="hi-navigation-bar__back" @tap="handleBack" v-if="isShowBack" :hover-class="hover">
                <slot name="back">
                    <!-- 返回按钮 -->
                    <view class="hi-navigation-bar__back__icon">
                        <hi-icon :name="backIcon"></hi-icon>
                    </view>
                    <!-- 返回文字 -->
                    <text class="hi-navigation-bar__back__text" v-if="backText">{{ backText }}</text>
                </slot>
            </view>

            <!-- 左侧插槽 -->
            <slot name="left">
                <view class="hi-navigation-bar__buttons hi-navigation-bar__buttons--left">
                    <block v-for="(btn, btnCurrent) in _leftMenu" :key="btnCurrent">
                        <view
                            class="hi-navigation-bar__button hi-navigation-bar__button--left"
                            @tap="handleMenuClick('left', btn, btnCurrent)"
                            :class="[btn?.class, btn?.disabled ? 'hi-disabled' : '']"
                            :style="btn?.style"
                            :hover-class="btn?.hover || hover"
                        >
                            <view class="hi-navigation-bar__button__icon hi-navigation-bar__button__icon--left" :style="btn?.iconStyle" v-if="btn?.icon">
                                <hi-icon :name="btn?.icon"></hi-icon>
                            </view>
                            <text class="hi-navigation-bar__button__text hi-navigation-bar__button__text--left" :style="btn?.textStyle" v-if="btn?.text">
                                {{ btn?.text }}
                            </text>
                        </view>
                    </block>
                </view>
            </slot>
        </view>

        <!-- 中间区域 -->
        <view class="hi-navigation-bar__center">
            <slot name="title" :title="titleText">
                <view class="hi-navigation-bar__title hi-line-1">
                    {{ titleText }}
                </view>
            </slot>
        </view>

        <!-- 右侧区域 -->
        <view class="hi-navigation-bar__right">
            <slot name="right">
                <view class="hi-navigation-bar__buttons hi-navigation-bar__buttons--right">
                    <block v-for="(btn, btnCurrent) in _rightMenu" :key="btnCurrent">
                        <view
                            class="hi-navigation-bar__button hi-navigation-bar__button--right"
                            @tap="handleMenuClick('right', btn, btnCurrent)"
                            :class="[btn?.class, btn?.disabled ? 'hi-disabled' : '']"
                            :style="btn?.style"
                            :hover-class="btn?.hover || hover"
                        >
                            <view class="hi-navigation-bar__button__icon hi-navigation-bar__button__icon--right" :style="btn?.iconStyle" v-if="btn?.icon">
                                <hi-icon :name="btn?.icon"></hi-icon>
                            </view>
                            <text class="hi-navigation-bar__button__text hi-navigation-bar__button__text--right" :style="btn?.textStyle" v-if="btn?.text">
                                {{ btn?.text }}
                            </text>
                        </view>
                    </block>
                </view>
            </slot>

            <!-- 胶囊按钮 -->
            <view class="hi-navigation-bar__menu"></view>
        </view>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { ref, computed, onMounted } from "vue";
    import { isObject, uniIsTabBar, uniGetCurrentPageData } from "../../functions";
    import props from "./props.js";
    import pages from "@/pages.json";

    // 当前页面的数据
    const currentPageData = ref(null);

    // 组件属性
    const _props = defineProps(props);

    // 组件事件
    const _emits = defineEmits(["back", "menuClick", "leftMenuClick", "rightMenuClick"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 对齐方式
        classes.push(`hi-navigation-bar--${_props.align}`);

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // 胶囊按钮宽度
        styles.push(`--hi-navigation-bar-menu-button-width: ${menuButtonWidth.value}px`);

        // 颜色
        if (_props.color) {
            styles.push(`--hi-navigation-bar-color: ${_props.color}`);
        } else {
            styles.push(`--hi-navigation-bar-color: ${currentPageData.value?.style?.navigationBarTextStyle || pages?.globalStyle?.navigationBarTextStyle};`);
        }

        // 背景
        if (_props.bg) {
            styles.push(`--hi-navigation-bar-background: ${_props.bg};`);
        } else if (_props.autoBg) {
            styles.push(
                `--hi-navigation-bar-background: ${
                    currentPageData.value?.style?.navigationBarBackgroundColor || pages?.globalStyle?.navigationBarBackgroundColor
                };`
            );
        }

        // 文字大小
        if (_props.fontSize) styles.push(`--hi-navigation-bar-font-size: ${_props.fontSize};`);

        // 高度
        if (_props.height) styles.push(`--hi-navigation-bar-height: ${_props.height};`);

        // 标题颜色
        if (_props.titleColor) styles.push(`--hi-navigation-bar-title-color: ${_props.titleColor};`);

        // 标题大小
        if (_props.titleFontSize) styles.push(`--hi-navigation-bar-title-font-size: ${_props.titleFontSize};`);

        // 标题粗细
        if (_props.titleFontWeight) styles.push(`--hi-navigation-bar-title-font-weight: ${_props.titleFontWeight};`);

        // 标题对齐方式
        if (_props.align) styles.push(`--hi-navigation-bar-title-text-align: ${_props.align};`);

        // 返回文字大小
        if (_props.backFontSize) styles.push(`--hi-navigation-bar-back-font-size: ${_props.backFontSize};`);

        // 返回文字颜色
        if (_props.backColor) styles.push(`--hi-navigation-bar-back-color: ${_props.backColor};`);

        // 返回文字粗细
        if (_props.backFontWeight) styles.push(`--hi-navigation-bar-back-font-weight: ${_props.backFontWeight};`);

        // 返回图标颜色
        if (_props.backIconColor) styles.push(`--hi-navigation-bar-back-icon-color: ${_props.backIconColor};`);

        // 返回图标大小
        if (_props.backIconSize) styles.push(`--hi-navigation-bar-back-icon-font-size: ${_props.backIconSize};`);

        // 菜单文字颜色
        if (_props.menuColor) styles.push(`--hi-navigation-bar-menus-color: ${_props.menuColor};`);

        // 菜单文字大小
        if (_props.menuFontSize) styles.push(`--hi-navigation-bar-menus-font-size: ${_props.menuFontSize};`);

        // 菜单图标颜色
        if (_props.menuIconColor) styles.push(`--hi-navigation-bar-menu-icon-color: ${_props.menuIconColor};`);

        // 菜单图标大小
        if (_props.menuIconSize) styles.push(`--hi-navigation-bar-menu-icon-font-size: ${_props.menuIconSize};`);

        return styles;
    });

    // 组件渲染完成后
    onMounted(() => {
        // 获取当前页面的数据
        currentPageData.value = uniGetCurrentPageData();
    });

    // 默认标题
    const titleText = computed(() => {
        if (_props.autoTitle) {
            return _props.title || currentPageData.value?.style?.navigationBarTitleText || pages?.globalStyle?.navigationBarTitleText;
        }
        return _props.title;
    });

    // 胶囊按钮宽度
    const menuButtonWidth = ref(0);

    // 胶囊按钮宽度
    onMounted(() => {
        if (uni?.getMenuButtonBoundingClientRect) {
            menuButtonWidth.value = uni.getMenuButtonBoundingClientRect()?.width || 0;
        }
    });

    // 左侧图标列表
    const _leftMenu = computed(() => {
        if (isObject(_props.leftMenu)) return [_props.leftMenu];
        return _props.leftMenu;
    });

    // 右侧图标列表
    const _rightMenu = computed(() => {
        if (isObject(_props.rightMenu)) return [_props.rightMenu];
        return _props.rightMenu;
    });

    // 是否显示返回按钮？
    const isShowBack = computed(() => {
        // 1. 开启了自动判断是否显示返回按钮
        if (_props.autoShowBack && _props.showBack) {
            // 1.1. 如果是 tabBar 页面，不需要显示返回按钮
            if (uniIsTabBar()) return false;

            // 1.2. 如果页面栈长度 <=1，同样不需要显示返回按钮
            return getCurrentPages().length > 1;
        }

        // 2. 否则，使用传入的设置
        return _props.showBack;
    });

    /**
     * 返回按钮点击事件
     */
    function handleBack() {
        _emits("back");
        if (_props.autoBack) {
            uni.navigateBack({
                delta: 1
            });
        }
    }

    /**
     * 菜单按钮点击事件
     * @param {String} type 菜单类型
     * @param {Object} btn 菜单按钮
     * @param {Number} btnCurrent 菜单按钮索引
     */
    function handleMenuClick(type, btn, btnCurrent) {
        _emits("menuClick", btn, btnCurrent, type);
        if (type === "left") {
            _emits("leftMenuClick", btn, btnCurrent);
        } else {
            _emits("rightMenuClick", btn, btnCurrent);
        }
    }

    // 组件对外暴漏的属性或方法
    defineExpose({});
</script>

<style lang="scss" scoped>
    .hi-navigation-bar {
        height: var(--hi-navigation-bar-height, 44px);
        display: var(--hi-navigation-bar-display, flex);
        align-items: var(--hi-navigation-bar-align-items, center);
        padding: var(--hi-navigation-bar-padding, 0 8px);
        gap: var(--hi-navigation-bar-gap, 8px);
        background: var(--hi-navigation-bar-background, transparent);
        color: var(--hi-navigation-bar-color, inherit);
        font-size: var(--hi-navigation-bar-font-size, inherit);
        z-index: var(--hi-navigation-bar-z-index, var(--hi-index-upper));

        &__left {
            flex-shrink: var(--hi-navigation-bar-left-flex-shrink, 0);
            flex: var(--hi-navigation-bar-left-flex, 1);
            display: var(--hi-navigation-bar-left-display, flex);
            align-items: var(--hi-navigation-bar-left-align-items, center);
            justify-content: var(--hi-navigation-bar-left-justify-content, flex-start);
            gap: var(--hi-navigation-bar-left-gap, 0);
        }

        &__back {
            font-size: var(--hi-navigation-bar-back-font-size, 14px);
            color: var(--hi-navigation-bar-back-color, inherit);
            font-weight: var(--hi-navigation-bar-back-font-weight, 500);
            display: var(--hi-navigation-bar-back-display, flex);
            align-items: var(--hi-navigation-bar-back-align-items, center);
            gap: var(--hi-navigation-bar-back-gap, 0);

            &__icon {
                color: var(--hi-navigation-bar-back-icon-color, inherit);
                font-size: var(--hi-navigation-bar-back-icon-font-size, 22px);
            }
        }

        &__center {
            flex-shrink: var(--hi-navigation-bar-center-flex-shrink, 0);
            flex: var(--hi-navigation-bar-center-flex, 2);
            color: var(--hi-navigation-bar-title-color, inherit);
            font-size: var(--hi-navigation-bar-title-font-size, 17px);
            font-weight: var(--hi-navigation-bar-title-font-weight, 700);
            text-align: var(--hi-navigation-bar-title-text-align, center);
            display: var(--hi-navigation-bar-center-display, block);
        }

        &__right {
            flex-shrink: var(--hi-navigation-bar-right-flex-shrink, 0);
            flex: var(--hi-navigation-bar-right-flex, 1);
            display: var(--hi-navigation-bar-right-display, flex);
            align-items: var(--hi-navigation-bar-right-align-items, center);
            justify-content: var(--hi-navigation-bar-right-justify-content, flex-end);
        }

        &__menu {
            width: var(--hi-navigation-bar-menu-button-width, 0);
            flex-shrink: 0;
        }

        &__buttons {
            color: var(--hi-navigation-bar-menus-color, inherit);
            display: var(--hi-navigation-bar-menus-display, flex);
            align-items: var(--hi-navigation-bar-menus-align-items, center);
            font-size: var(--hi-navigation-bar-menus-font-size, 12px);
            text-align: var(--hi-navigation-bar-menus-text-align, center);
            gap: var(--hi-navigation-bar-menus-gap, 10px);
        }

        &__button {
            display: var(--hi-navigation-bar-menu-display, flex);
            flex-direction: var(--hi-navigation-bar-menu-flex-direction, column);
            align-items: var(--hi-navigation-bar-menu-flex-align-items, center);
            justify-content: var(--hi-navigation-bar-menu-flex-justify-content, center);
            gap: var(--hi-navigation-bar-menu-gap, 2px);
            line-height: var(--hi-navigation-bar-menu-line-height, 1);

            &__icon {
                color: var(--hi-navigation-bar-menu-icon-color, inherit);
                font-size: var(--hi-navigation-bar-menu-icon-font-size, 18px);
            }
        }

        &--center {
            .hi-navigation-bar__left {
                flex: var(--hi-navigation-bar-left-flex, 1);
            }

            .hi-navigation-bar__center {
                flex: var(--hi-navigation-bar-center-flex, 2);
                text-align: var(--hi-navigation-bar-title-text-align, center);
            }

            .hi-navigation-bar__right {
                flex: var(--hi-navigation-bar-right-flex, 1);
            }
        }

        &--left {
            .hi-navigation-bar__left {
                flex: var(--hi-navigation-bar-left-flex, none);
            }

            .hi-navigation-bar__center {
                flex: var(--hi-navigation-bar-center-flex, 1);
                text-align: var(--hi-navigation-bar-title-text-align, left);
            }

            .hi-navigation-bar__right {
                flex: var(--hi-navigation-bar-right-flex, none);
            }
        }

        &--right {
            .hi-navigation-bar__left {
                flex: var(--hi-navigation-bar-left-flex, none);
            }

            .hi-navigation-bar__center {
                flex: var(--hi-navigation-bar-center-flex, 1);
                text-align: var(--hi-navigation-bar-title-text-align, right);
            }

            .hi-navigation-bar__right {
                flex: var(--hi-navigation-bar-right-flex, none);
            }
        }
    }
</style>
